import {Component,OnInit,NgModule,Directive,Pipe} from '@angular/core';
import {Car} from '../domain/car';
import {CarService} from '../service/carservice';
import {DataTableModule,SharedModule,Message,MenuItem,SelectItem,DropdownModule,SliderModule,MultiSelectModule,CalendarModule,DialogModule,LazyLoadEvent,FilterMetadata} from 'primeng/primeng';

@NgModule({
    imports: [],
    exports: [],
    declarations: [],
    providers: []
})
@Component({
    selector:"datatabledemo",
    templateUrl: './datatabledemo.html'
})

@Directive({
  selector: 'datatabledemo'
})
@Pipe({
  name: 'datatabledemo'
})
export class DataTableDemo implements OnInit {

    loading: boolean;
    displayDialog: boolean;
    car: Car = new PrimeCar();

    newCar: boolean;
    cars: Car[];
    cols: any[];
    msgs: Message[] = [];
    sales: any[];
    brands: SelectItem[];

    colors: SelectItem[];
    selectedCar: Car;
    dialogVisible: boolean;

    carsLarge: Car[];
    totalRecords: number;
    columnOptions: SelectItem[];
    stacked: boolean;
    constructor(private carService: CarService) { }

    ngOnInit() {
       console.log(this.carsLarge);
        this.loading = true;
        this.carService.getCarsSmall().subscribe(data => {
            //console.log(data);
            this.cars = <Car[]>data;
        });
        this.loading = false;
        this.cols = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];

        this.sales = [];
        let cl:any;
        for(cl=0;cl<10;cl++){
          this.sales[cl] = {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'};
        }

       this.totalRecords = 500000;

       this.columnOptions = [];
        for(let i = 0; i < this.cols.length; i++) {
            this.columnOptions.push({label: this.cols[i].header, value: this.cols[i]});
        }
    }

    selectCar(car: Car) {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Car Select', detail:'Vin: ' + car.vin});
    }
    showCar(car: Car) {
       this.selectedCar = car;
       this.dialogVisible = true;
   }
    toggle() {
        this.stacked = !this.stacked;
    }
    showDialogToAdd() {
            this.newCar = true;
            this.car = new PrimeCar();
            this.displayDialog = true;
        }
        save() {
            let cars = [...this.cars];
            if(this.newCar)
                cars.push(this.car);
            else
                cars[this.findSelectedCarIndex()] = this.car;

            this.cars = cars;
            this.car = null;
            this.displayDialog = false;
        }
        delete() {
            let index = this.findSelectedCarIndex();
            this.cars = this.cars.filter((val,i) => i!=index);
            this.car = null;
            this.displayDialog = false;
        }
        onRowSelect(event) {
            this.newCar = false;
            this.car = this.cloneCar(event.data);
            this.displayDialog = true;
        }
        cloneCar(c: Car): Car {
            let car = new PrimeCar();
            for(let prop in c) {
                car[prop] = c[prop];
            }
            return car;
        }
        findSelectedCarIndex(): number {
            return this.cars.indexOf(this.selectedCar);
        }
    }
    class PrimeCar implements Car {
        constructor(public vin?, public year?, public brand?, public color?) {}
    }
